<template>
  <div class="personinfo">
      <div class="infoall">
          <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="用户名">
            <a-input v-model="form.nickname" />
            </a-form-model-item>
            
            <a-form-model-item label="上传头像">
                <!-- <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="/trains/update_user/"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                    v-model="imageUrl"
                >
                    <img style="width:100px;height:100px" v-if="imageUrl" :src="imageUrl" alt="avatar" />
                    <div v-else>
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                        <div class="ant-upload-text">
                            Upload
                        </div>
                    </div>
                </a-upload> -->
                <input type="file" @change="uploadImg" accept="image/*" />
            </a-form-model-item>
            
            <a-form-model-item label="出生年月">
            <a-date-picker v-model="form.birthday" value-format="yyyy-MM-DD"  style="width: 100%;"/>
            </a-form-model-item>
            
            <a-form-model-item label="性别">
            <a-radio-group v-model="form.gender">
                <a-radio value="male">
                男
                </a-radio>
                <a-radio value="female">
                女
                </a-radio>
            </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="电话">
            <a-input v-model="form.mobile" />
            </a-form-model-item>
            
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">
                提交
            </a-button>
            
            </a-form-model-item>
        </a-form-model>
      </div>
  </div>
</template>

<script>
import {changeuserinfo,getuserinfoData} from '../../api/usercenter'
import axios from '../../utils/axios'
export default {
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            form: {
                nickname:'',
                birthday:'',
                gender:'',
                mobile:''
            },
            image:{}
        }
    },
    async created(){
        let result = await getuserinfoData()
        this.form.nickname = result.nickname
        this.form.birthday = result.birthday
        this.form.gender = result.gender
        this.form.mobile = result.mobile
    },
    methods:{
        onSubmit() {
            axios.post('/trains/update_user/',this.form).then(res=>{
                location.reload();
            })
        },
        uploadImg(e){
            let file = e.target.files[0];
            this.image = new FormData();//创建 formdata对象
            this.image.append('image',file);
            axios.post('/trains/update_user/',this.image).then(res=>{
                this.$message.success('上传成功')
            })
        }
    }
}
</script>

<style lang='less'>
</style>